<template>
  <z-paging ref="paging" safe-area-inset-bottom  auto-show-system-loading v-model="dataList" @query="queryList">
    <view slot="top">
      <navbar title="清单"></navbar>
      <view class="head flex row-between col-center">
        <view>共
          <text class="red">{{total}}</text>
          件
        </view>
        <!--<view v-if="dataList.length" @click="showHandler =!showHandler;checkAll = false">{{ showHandler ? '取消' : '管理' }}</view>-->
      </view>
    </view>
    <view class="list show">
      <view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
        <view class="check" @click.stop="changeItemCheck(item)">
          <text :class="['iconfont', item.checked ? 'icon-checked' : 'icon-check']"/>
        </view>
        <view class="goods-box">
          <c-image :src="item.imageUrl" width="150rpx" height="150rpx" radius="16rpx" mode="aspectFill"/>
          <view class="info">
            <view class="name line-1">{{ item.spuName }}</view>
            <view class="sku">{{ item.skuNo }}</view>
            <view class="handle">
              <view class="price-label">
                <text class="price">￥{{ item.nowPrice || 0 }}</text>
                <text class="origin-price">￥{{ item.originPrice || 0 }}</text>
              </view>
              <view class="num" @click.stop>
                <u-number-box
                  integer
                  :value="item.quantity"
                  buttonSize="24"
                  iconStyle="font-size: 24rpx;"
                  @change="(e) => changeNum(item, index, e)"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer" slot="bottom">
      <view class="footer-place"/>
      <view class="footer-fixed">
        <view class="footer-content">
          <view class="check" @click="changeCheckAll">
            <text :class="['iconfont', checkAll ? 'icon-checked' : 'icon-check']"/>
            全选
          </view>
          <view class="right">
            <view class="total-price">￥<text>{{totalPrice}}</text></view>
            <view class="btn" @click="remove">删除</view>
            <view class="btn submit" @click="addCart">提交</view>
          </view>
        </view>
        <u-safe-bottom/>
      </view>
    </view>
    <c-modal v-model="showRemove" @confirm="handleRemove">确认移除清单吗？</c-modal>
    <c-modal v-model="showAdd" @confirm="handleAddCart">确认提交所选吗？</c-modal>
  </z-paging>
</template>

<script>
import {getCartList, removeCartBatch, submitCart} from "@/api/my";

export default {
  data() {
    return {
      dataList: [],
      total: 0,
      showHandler: false, // 是否显示操作按钮
      checkAll: false, // 全选按钮
      showRemove: false, // 是否显示移除确认弹窗
      totalPrice: 0, // 总价
      showAdd: false
    };
  },
  computed: {
    checkIds() {
      let ids = this.dataList.filter(item => item.checked).map(item => item.skuId);
      return ids;
    },
  },
  methods: {
    queryList(pageNo, pageSize) {
      getCartList({pageNum: pageNo, pageSize: pageSize}).then(res => {
        this.$refs.paging.complete((res.records || []).map(item => {
          item.checked = true;
          return item;
        }))
        this.calcTotalPrice();
        this.total = res.total
      })
    },
    resetQuery() {
      this.$refs.paging.reload()
    },
    changeNum(item, index, e) {
      item.quantity = e.value;
      this.dataList[index] = item;
      this.calcTotalPrice();
    },
    calcTotalPrice() {
      let price = 0;
      this.dataList.forEach(item => {
        if (item.checked) {
          price += item.nowPrice * item.quantity;
        }
      })
      this.totalPrice = price.toFixed(2);
      this.checkAll = this.dataList.every(item => item.checked);
    },
    changeItemCheck(item) {
      item.checked = !item.checked;
      this.checkAll = this.dataList.every(item => item.checked);
      this.calcTotalPrice();
    },
    changeCheckAll() {
      this.checkAll = !this.checkAll;
      this.dataList.forEach(item => {
        item.checked = this.checkAll;
      })
    },
    remove() {
     if (!this.checkIds.length) return
      this.showRemove = true;
    },
    handleRemove() {
      this.showRemove = false;
      removeCartBatch({ids: this.checkIds.join(',')}).then(res => {
        this.$toast('删除成功');
        this.resetQuery()
      })
    },
    addCart() {
      if (!this.checkIds.length) {
        this.$toast('请选择商品');
        return
      }
      this.showAdd = true;
    },
    handleAddCart() {
      let skuList = this.dataList.filter(e => e.checked).map(item => {
        return {
          spuName: item.spuName,
          skuId: item.skuId,
          price: item.nowPrice,
          quantity: item.quantity,
        }
      })
      let params = {
        status: 1,
        totalPrice: this.totalPrice,
        dzMaterialSkuCartList: skuList,
      }
      this.showAdd = false;
      submitCart(params).then(res => {
        this.$toast('提交成功');
        this.resetQuery()
        uni.navigateTo({
          url: '/pages/my/order/order'
        })
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${item.skuId}`
      });
    }
  },
  watch: {
    dataList: {
      handler(val) {
        this.calcTotalPrice();
      },
      deep: true
    }
  }
}
</script>

<style lang="scss">
@import "@/static/styles/minix.scss";

page {
  background: #fff;
}

.head {
  padding: 10rpx 30rpx 20rpx 30rpx;
}

.list {
  padding: 0 20rpx;

  .item {
    position: relative;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    margin-left: -64rpx;

    .check {
      width: 64rpx;
      font-size: 40rpx;
      color: $-color-gray;

      .icon-checked {
        color: #e0b883;
      }
    }

    .goods-box {
      flex: 1;
      display: flex;
      align-items: stretch;
      margin-bottom: 24rpx;
      .c-image {
        margin-right: 20rpx;
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-weight: bold;
          font-size: 30rpx;
        }

        .sku {
          background: #f4f4f4;
          font-size: 24rpx;
          color: #565656;
          padding: 4rpx 10rpx;
          border-radius: 4rpx;
          width: max-content;
        }

        .handle {
          @include flex-between;

          .price-label {
            .price {
              font-size: 30rpx;
              color: #e0b883;
              margin-right: 10rpx;
            }

            .origin-price {
              font-size: 24rpx;
              color: #999;
              text-decoration: line-through;
            }
          }
        }
      }
    }
  }

  &.show {
    .item {
      margin-left: 0;
    }
  }

}

.footer-place {
  height: 90rpx;
}

.footer-fixed {
  position: fixed;
  width: 100%;
  background: #ffff;
  bottom: 0;
  z-index: 999;
  border-top: 1rpx solid #f4f4f4;
  .footer-content {
    height: 90rpx;
    @include flex-between;

    .check {
      margin: 0 30rpx;
      color: $-color-gray;
      @include flex-center;

      .iconfont {
        font-size: 40rpx;
        margin-right: 10rpx;
      }

      .icon-checked {
        color: #e0b883;
      }
    }

    .right {
      display: flex;
      flex: 1;
      height: 100%;
      text-align: center;
      font-size: 32rpx;
      line-height: 90rpx;
      color: #fff;
      .total-price {
         color: #e0b883;
        font-size: 32rpx;
        margin-right: 30rpx;
        text {
          font-size: 48rpx;
        }
       }
      .btn {
        flex: 1;
        background: #ff8100;
        &:last-child {
          background: linear-gradient(to right, #f2e0b9, #e0b883);
        }
      }
    }
  }
}
</style>
